<template>
  <CustomNav title="客片" :isShowBack="false"></CustomNav>
  <view class="container">
    <view class="tabs">
      <van-tabs
        :active="tabTypeActive"
        color="#FFB61E"
        sticky
        @change="hangleTabTypeActive"
      >
        <!-- <van-tab title="全部"></van-tab> -->
        <van-tab title="客片"></van-tab>
        <van-tab title="视频"></van-tab>
      </van-tabs>
    </view>

    <!-- 综合 -->
    <view class="comprehensiveContainer" v-if="tabTypeActive != 2">
      <view class="comprehensive">
        <van-tabs :active="0" color="#FFB61E">
          <van-tab title="综合"></van-tab>
        </van-tabs>
      </view>
      <view class="salesVolume">
        <view class="txt">销量</view>
        <!-- <i class="iconfont icon-shangxiajiantou"></i> -->
        <view class="icon">
          <i class="iconfont icon-_31fanhui1"></i>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
    </view>

    <!-- <view class="waterfall">
      <view class="box">
        <view class="img">
          <image src="https://pic.imgdb.cn/item/65811de6c458853aef31c2a9.jpg" />
        </view>
        <view class="info">
          <view class="title">大唐公主</view>
          <view class="love">18204649</view>
        </view>
      </view>
    </view> -->

    <!-- 全部 -->
    <view class="content" v-if="tabTypeActive == 0">
      <All />
    </view>

    <!-- 照片 -->
    <view class="imgContainer" v-if="tabTypeActive == 1">
      <Photo />
    </view>
    <view class="videoContainer" v-if="tabTypeActive == 2">
      <VideoCom />
    </view>
  </view>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import All from "./all.vue";
import Photo from "./photo.vue";
import VideoCom from "./video.vue";

// 当前tab栏的激活选项
const tabTypeActive = ref(0);

// 点击tab栏
const hangleTabTypeActive = (e) => {
  tabTypeActive.value = e.detail.index;
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 90vh;
  // padding: 20rpx 50rpx;
  padding-top: 0;
  background-color: #efefef;
  padding-bottom: 30rpx;

  .tabs {
    padding: 20rpx 50rpx;
    background-color: #fff;
    // margin-bottom: 20rpx;
    position: fixed;
    width: 100%;
    z-index: 100;
    padding-top: 0;
  }

  .comprehensiveContainer {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 30rpx;
    // margin-top: 120rpx;
    padding-top: 105rpx;

    .comprehensive {
      :deep(.van-tabs__scroll) {
        background-color: unset;
      }
    }

    .salesVolume {
      display: flex;
      align-items: center;

      .icon {
        display: flex;
        align-items: center;
        // flex-direction: column;
        transform: rotate(90deg);
        margin-bottom: 10rpx;

        .iconfont {
          font-size: 16rpx;
          margin-left: 10rpx;
          font-weight: 800;
        }
      }
    }
  }

  .waterfall {
    width: 100%;
  }

  .content {
    width: 100%;
  }

  .videoContainer {
    width: 100%;
    padding: 30rpx 20rpx;
    padding-top: 120rpx;
  }
}
</style>
